<template>
  <div class="login">

    <div class="box">
      <img src="../../assets/SEN.png" alt="" class="img1">
      <img src="../../assets/CN.png" alt="" class="img2">
      <el-form class="demo-ruleForm box1" ref="ruleForm" :rules="rules" status-icon :model="ruleForm">
        <el-form-item class="d1" prop="account">
          <div>{{ $t("lang.account") }}：</div>
          <el-input v-model="ruleForm.account" autocomplete="off" :placeholder="$t('lang.P_account')"></el-input>
        </el-form-item>

        <el-form-item class="d1" prop="password">
          <div>{{ $t("lang.password") }}：</div>
          <el-input :placeholder="$t('lang.P_password')" v-model="ruleForm.password" autocomplete="off" show-password></el-input>
        </el-form-item>

        <el-form-item class="d1">
          <div>{{ $t("lang.sliderCheck") }}：</div>
          <SliderCheck :successFun="handleSuccessFun" :errorFun="handleErrorFun"></SliderCheck>
        </el-form-item>

        <el-form-item class="d1">
          <el-button type="primary" class="btn" @click="submitForm('ruleForm')">{{ $t("lang.login") }}</el-button>
        </el-form-item>

        <div>
          <el-button type="text" class="wenzi">{{ $t("lang.register") }}</el-button>
        </div>
      </el-form>
    </div>

    <div class="bottom">
      <div class="show">
        <img src="../../assets/img/seeed.png" alt="" class="img3">
        <span>
          <div>© 2008-2021 {{ $t("lang.compony") }}</div>
          <div>粤ICP备13058720号</div>
        </span>
        <span>{{ $t("lang.privacy") }}</span>
        <img src="../../assets/img/mcafee.png" alt="" class="img4">
        <el-select v-model="lang" :placeholder="$t('lang.lang')" @change="changeLang">
          <el-option v-for="i in options" :key="i.value" :label="i.label" :value="i.value"></el-option>
        </el-select>
      </div>
    </div>
  </div>
</template>

<script>
import SliderCheck from "@/components/SliderCheck";

export default {
  components: {
    SliderCheck,
  },
  name: "login",
  data() {
    return {
      value: "中国站",
      options: [
        {value: "zh", label: this.$t("lang.cs")},
        {value: "en", label: this.$t("lang.is")}
      ],
      lang:"",
      sliderCheck:"",
      sliderText:"",
      register:"",
      privacy:"",
      compony:"",
      P_password:"",
      P_account:"",
      ruleForm: {
        account: "",
        password: "",
      },
      rules: {
        account: [{required: true, trigger: "blur", message: "请输入用户名"}],
        password: [{required: true, trigger: "blur", message: "请输入密码"}],
      },
    }
  },
  methods: {
    //登录
    submitForm() {
      console.log("登录函数被调用了");
      //1.验证输入的用户名和密码是否正确
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          //验证成功
          //调用vuex 中 user子树里面的 登录的 action动作
          this.$store.dispatch("LoginAction", this.ruleForm)
        } else {
          //验证没通过
          console.log("验证没通过");
        }
      });
    },

    // 滑块验证成功回调
    handleSuccessFun() {
      //this.login_model.status = true
    },
    // 滑块验证失败回调
    handleErrorFun() {
    },
    //切换语言集
    changeLang(){
      console.log("切换语言集触发了");
      console.log(this.$i18n.locale);
      //this.$i18n.locale = "zh";
      //调用 vuex中的lang子树的 mutations
      this.$store.commit("SET_LANG",this.lang);
      //整个页面刷新
      this.$router.go(0);
    },
  },
  created() {
    console.log(this);
    this.lang = this.$store.getters.locale;
    this.sliderCheck = this.$store.getters.locale;
    this.register = this.$store.getters.locale;
    this.privacy = this.$store.getters.locale;
    this.compony = this.$store.getters.locale;
    this.P_password = this.$store.getters.locale;
    this.P_account = this.$store.getters.locale;
  }
}
</script>

<style scoped lang="scss">
.login {
  width: 100%;
  height: 100vh;
  background: #d8d8d8;
  display: flex;
  align-items: center;
  justify-content: center;
}

.box {
  position: relative;
  width: 350px;
  height: 450px;
  background: white;
  text-align: center;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;

  .img1 {
    width: 100px;
  }

  .img2 {
    width: 50px;
    position: absolute;
    top: 0;
    right: 0;
  }

  .box1 {
    .el-form-item {
      margin-bottom: 10px;
    }

    width: 250px;

    .d1 {
      text-align: left;

      .btn {
        width: 100%;
      }
    }

    .wenzi {
      width: 100%;
      border: 1px solid #79bcff;
      border-radius: 5px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 65px;
  background: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  .show {
    font-size: 12px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 65%;

    .img3 {
      width: 115px;
    }

    .img4 {
      width: 75px;
    }
  }
}
</style>